<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岚小字识字系统 - 书写讲解管理</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .app-container {
            max-width: 1600px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .main-grid {
            display: grid;
            grid-template-columns: 350px 1fr 400px;
            gap: 30px;
            height: 85vh;
        }

        /* 左侧数据来源选择 */
        .data-source {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        }

        .source-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
            text-align: center;
            padding-bottom: 10px;
            border-bottom: 2px solid #e2e8f0;
        }

        .source-tabs {
            display: flex;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
            background: #f7fafc;
        }

        .source-tab {
            flex: 1;
            padding: 10px;
            background: #f7fafc;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .source-tab.active {
            background: #667eea;
            color: white;
        }

        .data-list {
            max-height: 500px;
            overflow-y: auto;
        }

        .data-item {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .data-item:hover {
            background: #e6fffa;
            border-color: #38b2ac;
        }

        .data-item.selected {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .data-item-main {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .data-item-info {
            font-size: 12px;
            opacity: 0.8;
        }

        /* 中间编辑区域 */
        .edit-area {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            overflow-y: auto;
        }

        .edit-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e2e8f0;
        }

        .edit-title {
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
        }

        .char-display {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 4rem;
            font-weight: bold;
            width: 100px;
            height: 100px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }

        .form-section {
            margin-bottom: 25px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .ai-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
            font-weight: 500;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #4a5568;
            margin-bottom: 5px;
        }

        .form-input, .form-textarea, .form-select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .form-input:focus, .form-textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }

        .ai-generate-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            margin-left: 10px;
            transition: all 0.3s;
        }

        .ai-generate-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .stroke-order-area {
            background: #f7fafc;
            border: 2px dashed #cbd5e0;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            margin-bottom: 15px;
        }

        .stroke-display {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 15px;
        }

        .stroke-item {
            background: #667eea;
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 13px;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 30px;
        }

        .action-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-primary { background: #667eea; color: white; }
        .btn-success { background: #48bb78; color: white; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }
        .btn-warning { background: #ed8936; color: white; }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        /* 右侧预览区域 */
        .preview-area {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            overflow-y: auto;
        }

        .preview-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
            text-align: center;
        }

        .canvas-container {
            background: white;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
        }

        #writing-canvas {
            border: 1px solid #cbd5e0;
            border-radius: 8px;
        }

        .writing-controls {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 15px;
        }

        .control-btn {
            padding: 8px 16px;
            border: 1px solid #e2e8f0;
            background: white;
            border-radius: 20px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
        }

        .control-btn:hover {
            background: #f7fafc;
            border-color: #667eea;
        }

        .preview-content {
            background: #f7fafc;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }

        .preview-label {
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .preview-text {
            font-size: 14px;
            line-height: 1.6;
            color: #4a5568;
        }

        /* AI模型选择弹窗 */
        .ai-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .ai-modal-content {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            max-height: 600px;
            overflow-y: auto;
        }

        .modal-header {
            text-align: center;
            margin-bottom: 25px;
        }

        .ai-models {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }

        .ai-model-option {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .ai-model-option:hover {
            border-color: #667eea;
            background: #f7fafc;
        }

        .ai-model-option.selected {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        .custom-prompt {
            margin-top: 20px;
        }

        /* 响应式 */
        @media (max-width: 1400px) {
            .main-grid {
                grid-template-columns: 300px 1fr 350px;
            }
        }

        @media (max-width: 1200px) {
            .main-grid {
                grid-template-columns: 250px 1fr 300px;
            }
        }

        @media (max-width: 968px) {
            .main-grid {
                grid-template-columns: 1fr;
                grid-template-rows: auto 1fr auto;
                height: auto;
            }
            
            .data-source, .preview-area {
                max-height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <div class="header">
            <h1>✍️ 书写讲解管理</h1>
            <p>岚小字识字系统 - 字根部首书写练习管理</p>
        </div>

        <div class="main-grid">
            <!-- 左侧数据来源 -->
            <div class="data-source">
                <div class="source-title">📚 数据来源</div>
                
                <div class="source-tabs">
                    <button class="source-tab active" onclick="switchTab('zigen')">字根</button>
                    <button class="source-tab" onclick="switchTab('bushou')">部首</button>
                    <button class="source-tab" onclick="switchTab('bihua')">笔画</button>
                </div>

                <div class="data-list" id="data-list">
                    <!-- 数据项将通过JavaScript生成 -->
                </div>
            </div>

            <!-- 中间编辑区域 -->
            <div class="edit-area">
                <div class="edit-header">
                    <div class="edit-title">编辑书写讲解</div>
                    <div class="char-display" id="char-display">土</div>
                </div>

                <!-- 基础信息 -->
                <div class="form-section">
                    <div class="section-title">📋 基础信息</div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">字符</label>
                            <input type="text" class="form-input" id="char-input" readonly>
                        </div>
                        <div class="form-group">
                            <label class="form-label">读音 <span class="ai-badge">AI</span></label>
                            <div style="display: flex; align-items: center;">
                                <input type="text" class="form-input" id="pinyin-input" style="flex: 1;">
                                <button class="ai-generate-btn" onclick="generateContent('pinyin')">生成</button>
                            </div>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">笔画数 <span class="ai-badge">AI</span></label>
                            <div style="display: flex; align-items: center;">
                                <input type="number" class="form-input" id="stroke-count-input" style="flex: 1;">
                                <button class="ai-generate-btn" onclick="generateContent('strokeCount')">生成</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">难度级别</label>
                            <select class="form-select" id="difficulty-select">
                                <option value="初级">初级 (1-2年级)</option>
                                <option value="中级">中级 (3-4年级)</option>
                                <option value="高级">高级 (5-6年级)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 笔画顺序 -->
                <div class="form-section">
                    <div class="section-title">🖊️ 笔画顺序 <span class="ai-badge">AI</span>
                        <button class="ai-generate-btn" onclick="generateContent('strokeOrder')">生成笔画顺序</button>
                    </div>
                    
                    <div class="stroke-order-area">
                        <div class="stroke-display" id="stroke-display">
                            <span class="stroke-item">1. 横</span>
                            <span class="stroke-item">2. 竖</span>
                            <span class="stroke-item">3. 横</span>
                        </div>
                        <input type="text" class="form-input" id="stroke-order-input" placeholder="手动输入笔画顺序，用逗号分隔">
                    </div>
                </div>

                <!-- 书写要领 -->
                <div class="form-section">
                    <div class="section-title">📝 书写要领 <span class="ai-badge">AI</span>
                        <button class="ai-generate-btn" onclick="generateContent('writingTips')">生成要领</button>
                    </div>
                    
                    <div class="form-group">
                        <textarea class="form-textarea" id="writing-tips-textarea" 
                                  placeholder="AI将生成详细的书写要领，包括笔画位置、力度、角度等..."
                                  style="min-height: 100px;"></textarea>
                    </div>
                </div>

                <!-- 记忆口诀 -->
                <div class="form-section">
                    <div class="section-title">🎵 记忆口诀 <span class="ai-badge">AI</span>
                        <button class="ai-generate-btn" onclick="generateContent('memoryTip')">生成口诀</button>
                    </div>
                    
                    <div class="form-group">
                        <textarea class="form-textarea" id="memory-tip-textarea" 
                                  placeholder="AI将生成朗朗上口的记忆口诀..."
                                  style="min-height: 80px;"></textarea>
                    </div>
                </div>

                <!-- 常见错误 -->
                <div class="form-section">
                    <div class="section-title">⚠️ 常见错误 <span class="ai-badge">AI</span>
                        <button class="ai-generate-btn" onclick="generateContent('commonErrors')">分析错误</button>
                    </div>
                    
                    <div class="form-group">
                        <textarea class="form-textarea" id="common-errors-textarea" 
                                  placeholder="AI将分析学生容易出现的书写错误..."
                                  style="min-height: 100px;"></textarea>
                    </div>
                </div>

                <!-- 外部数据导入 -->
                <div class="form-section">
                    <div class="section-title">📂 描边数据导入 <span style="color: #e53e3e; font-size: 12px;">(不使用AI)</span></div>
                    
                    <div class="form-group">
                        <label class="form-label">SVG描边数据</label>
                        <textarea class="form-textarea" id="svg-data-textarea" 
                                  placeholder="粘贴或导入外部SVG描边数据..."
                                  style="min-height: 100px;"></textarea>
                    </div>
                    
                    <div style="display: flex; gap: 10px;">
                        <button class="action-btn btn-secondary" onclick="importSVGFile()">📁 导入文件</button>
                        <button class="action-btn btn-secondary" onclick="previewSVG()">👁️ 预览描边</button>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="action-buttons">
                    <button class="action-btn btn-success" onclick="saveWritingData()">💾 保存数据</button>
                    <button class="action-btn btn-primary" onclick="generateWorksheet()">📋 生成字帖</button>
                    <button class="action-btn btn-warning" onclick="previewWriting()">👁️ 预览效果</button>
                    <button class="action-btn btn-secondary" onclick="clearForm()">🔄 清空表单</button>
                </div>
            </div>

            <!-- 右侧预览区域 -->
            <div class="preview-area">
                <div class="preview-title">👁️ 书写预览</div>
                
                <!-- Canvas画布 -->
                <div class="canvas-container">
                    <canvas id="writing-canvas" width="300" height="300"></canvas>
                    <div class="writing-controls">
                        <button class="control-btn" onclick="showStroke()">显示笔画</button>
                        <button class="control-btn" onclick="hideStroke()">隐藏笔画</button>
                        <button class="control-btn" onclick="animateWriting()">演示书写</button>
                        <button class="control-btn" onclick="clearCanvas()">清空画布</button>
                    </div>
                </div>

                <!-- 内容预览 -->
                <div class="preview-content">
                    <div class="preview-label">📝 书写要领</div>
                    <div class="preview-text" id="preview-tips">暂无内容</div>
                </div>

                <div class="preview-content">
                    <div class="preview-label">🎵 记忆口诀</div>
                    <div class="preview-text" id="preview-memory">暂无内容</div>
                </div>

                <div class="preview-content">
                    <div class="preview-label">⚠️ 常见错误</div>
                    <div class="preview-text" id="preview-errors">暂无内容</div>
                </div>

                <div style="text-align: center; margin-top: 20px;">
                    <button class="action-btn btn-primary" onclick="exportPractice()">📤 导出练习</button>
                </div>
            </div>
        </div>
    </div>

    <!-- AI模型选择弹窗 -->
    <div class="ai-modal" id="ai-modal">
        <div class="ai-modal-content">
            <div class="modal-header">
                <h3>🤖 选择AI模型</h3>
                <p style="color: #666; margin-top: 10px;">为 <span id="generate-type"></span> 选择AI模型</p>
            </div>

            <div class="ai-models">
                <div class="ai-model-option" data-model="deepseek">
                    <div style="font-weight: 600;">DeepSeek</div>
                    <div style="font-size: 12px; color: #666;">推理能力强</div>
                </div>
                <div class="ai-model-option" data-model="qwen">
                    <div style="font-weight: 600;">Qwen</div>
                    <div style="font-size: 12px; color: #666;">中文优化</div>
                </div>
                <div class="ai-model-option" data-model="yi">
                    <div style="font-weight: 600;">Yi-Lightning</div>
                    <div style="font-size: 12px; color: #666;">响应快速</div>
                </div>
                <div class="ai-model-option" data-model="glm">
                    <div style="font-weight: 600;">GLM-4</div>
                    <div style="font-size: 12px; color: #666;">逻辑清晰</div>
                </div>
                <div class="ai-model-option" data-model="claude">
                    <div style="font-weight: 600;">Claude</div>
                    <div style="font-size: 12px; color: #666;">教育专业</div>
                </div>
                <div class="ai-model-option" data-model="gpt4">
                    <div style="font-weight: 600;">GPT-4</div>
                    <div style="font-size: 12px; color: #666;">综合能力强</div>
                </div>
            </div>

            <div class="custom-prompt">
                <label class="form-label">自定义提示词</label>
                <textarea class="form-textarea" id="custom-prompt-textarea" 
                          placeholder="输入针对此内容的特殊要求..." style="min-height: 80px;"></textarea>
            </div>

            <div class="action-buttons" style="margin-top: 20px;">
                <button class="action-btn btn-primary" onclick="confirmAIGenerate()">🚀 开始生成</button>
                <button class="action-btn btn-secondary" onclick="closeAIModal()">❌ 取消</button>
            </div>
        </div>
    </div>

    <script>
        // 模拟数据 - 实际使用中应该从前面的系统共享
        let sharedData = {
            zigens: [
                { id: 1, char: '土', name: '土字旁', pinyin: 'tǔ', strokeCount: 3, type: 'bushou' },
                { id: 2, char: '也', name: '也字根', pinyin: 'yě', strokeCount: 3, type: 'zigen' },
                { id: 3, char: '皮', name: '皮字根', pinyin: 'pí', strokeCount: 5, type: 'zigen' },
                { id: 4, char: '支', name: '支字根', pinyin: 'zhī', strokeCount: 4, type: 'zigen' },
                { id: 5, char: '水', name: '水字旁', pinyin: 'shuǐ', strokeCount: 4, type: 'bushou' },
                { id: 6, char: '火', name: '火字旁', pinyin: 'huǒ', strokeCount: 4, type: 'bushou' }
            ],
            bushou: [
                { id: 1, name: '土字旁', bushou: '土', char: '土', pinyin: 'tǔ', strokeCount: 3 },
                { id: 2, name: '水字旁', bushou: '氵', char: '水', pinyin: 'shuǐ', strokeCount: 4 },
                { id: 3, name: '火字旁', bushou: '火', char: '火', pinyin: 'huǒ', strokeCount: 4 }
            ],
            bihua: [
                { id: 1, name: '横', char: '一', order: 1 },
                { id: 2, name: '竖', char: '丨', order: 2 },
                { id: 3, name: '撇', char: '丿', order: 3 },
                { id: 4, name: '捺', char: '乀', order: 4 },
                { id: 5, name: '点', char: '丶', order: 5 }
            ]
        };

        // 全局变量
        let currentTab = 'zigen';
        let selectedItem = null;
        let currentGenerateType = '';
        let selectedAIModel = 'deepseek';

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            switchTab('zigen');
            setupCanvas();
        });

        // 切换数据源标签
        function switchTab(tab) {
            currentTab = tab;
            
            // 更新标签样式
            document.querySelectorAll('.source-tab').forEach(el => el.classList.remove('active'));
            event.target.classList.add('active');
            
            // 加载对应数据
            loadDataList();
        }

        // 加载数据列表
        function loadDataList() {
            const container = document.getElementById('data-list');
            const data = sharedData[currentTab];
            
            container.innerHTML = data.map(item => {
                let mainText = item.char || item.name;
                let infoText = '';
                
                if (currentTab === 'zigen' || currentTab === 'bushou') {
                    infoText = `${item.name} | ${item.pinyin || ''} | ${item.strokeCount || ''}画`;
                } else if (currentTab === 'bihua') {
                    infoText = `基础笔画 | 序号${item.order}`;
                }
                
                return `
                    <div class="data-item" onclick="selectItem(${item.id}, '${currentTab}')">
                        <div class="data-item-main">${mainText}</div>
                        <div class="data-item-info">${infoText}</div>
                    </div>
                `;
            }).join('');
        }

        // 选择数据项
        function selectItem(id, type) {
            // 更新选中状态
            document.querySelectorAll('.data-item').forEach(el => el.classList.remove('selected'));
            event.target.classList.add('selected');
            
            // 查找对应数据
            selectedItem = sharedData[type].find(item => item.id === id);
            
            // 填充表单
            fillForm(selectedItem, type);
        }

        // 填充表单
        function fillForm(item, type) {
            const char = item.char || item.name;
            
            // 更新字符显示
            document.getElementById('char-display').textContent = char;
            document.getElementById('char-input').value = char;
            
            // 填充已有数据（数据共享）
            if (item.pinyin) {
                document.getElementById('pinyin-input').value = item.pinyin;
            }
            if (item.strokeCount) {
                document.getElementById('stroke-count-input').value = item.strokeCount;
            }
            
            // 清空其他字段，等待用户选择生成或手动输入
            document.getElementById('stroke-order-input').value = '';
            document.getElementById('writing-tips-textarea').value = '';
            document.getElementById('memory-tip-textarea').value = '';
            document.getElementById('common-errors-textarea').value = '';
            document.getElementById('svg-data-textarea').value = '';
            
            // 更新预览
            updatePreview();
        }

        // 生成AI内容
        function generateContent(type) {
            if (!selectedItem) {
                alert('请先选择一个字符');
                return;
            }
            
            currentGenerateType = type;
            showAIModal();
        }

        // 显示AI模型选择弹窗
        function showAIModal() {
            const typeNames = {
                'pinyin': '读音',
                'strokeCount': '笔画数',
                'strokeOrder': '笔画顺序',
                'writingTips': '书写要领',
                'memoryTip': '记忆口诀',
                'commonErrors': '常见错误'
            };
            
            document.getElementById('generate-type').textContent = typeNames[currentGenerateType];
            document.getElementById('ai-modal').style.display = 'flex';
            
            // 重置选择
            document.querySelectorAll('.ai-model-option').forEach(el => el.classList.remove('selected'));
            document.querySelector(`[data-model="${selectedAIModel}"]`).classList.add('selected');
        }

        // 关闭AI弹窗
        function closeAIModal() {
            document.getElementById('ai-modal').style.display = 'none';
        }

        // AI模型选择
        document.addEventListener('click', function(e) {
            if (e.target.closest('.ai-model-option')) {
                document.querySelectorAll('.ai-model-option').forEach(el => el.classList.remove('selected'));
                e.target.closest('.ai-model-option').classList.add('selected');
                selectedAIModel = e.target.closest('.ai-model-option').dataset.model;
            }
        });

        // 确认AI生成
        function confirmAIGenerate() {
            const char = selectedItem.char || selectedItem.name;
            const customPrompt = document.getElementById('custom-prompt-textarea').value;
            
            // 模拟AI生成（实际应该调用API）
            const mockResults = {
                'pinyin': generateMockPinyin(char),
                'strokeCount': generateMockStrokeCount(char),
                'strokeOrder': generateMockStrokeOrder(char),
                'writingTips': generateMockWritingTips(char),
                'memoryTip': generateMockMemoryTip(char),
                'commonErrors': generateMockCommonErrors(char)
            };
            
            // 填充结果
            const result = mockResults[currentGenerateType];
            fillGeneratedContent(currentGenerateType, result);
            
            closeAIModal();
            alert(`✅ ${selectedAIModel}已生成${document.getElementById('generate-type').textContent}内容`);
        }

        // 填充生成的内容
        function fillGeneratedContent(type, content) {
            switch(type) {
                case 'pinyin':
                    document.getElementById('pinyin-input').value = content;
                    break;
                case 'strokeCount':
                    document.getElementById('stroke-count-input').value = content;
                    break;
                case 'strokeOrder':
                    document.getElementById('stroke-order-input').value = content.join(', ');
                    updateStrokeDisplay(content);
                    break;
                case 'writingTips':
                    document.getElementById('writing-tips-textarea').value = content;
                    break;
                case 'memoryTip':
                    document.getElementById('memory-tip-textarea').value = content;
                    break;
                case 'commonErrors':
                    document.getElementById('common-errors-textarea').value = content;
                    break;
            }
            updatePreview();
        }

        // 模拟AI生成函数
        function generateMockPinyin(char) {
            const pinyinMap = {
                '土': 'tǔ', '也': 'yě', '皮': 'pí', '支': 'zhī',
                '水': 'shuǐ', '火': 'huǒ', '一': 'yī', '丨': 'shù'
            };
            return pinyinMap[char] || 'unknown';
        }

        function generateMockStrokeCount(char) {
            const strokeMap = {
                '土': 3, '也': 3, '皮': 5, '支': 4,
                '水': 4, '火': 4, '一': 1, '丨': 1
            };
            return strokeMap[char] || 1;
        }

        function generateMockStrokeOrder(char) {
            const orderMap = {
                '土': ['横', '竖', '横'],
                '也': ['横折钩', '竖', '竖弯钩'],
                '皮': ['横撇', '撇', '竖', '横撇', '捺'],
                '支': ['横', '撇', '捺', '点'],
                '水': ['竖钩', '横撇', '撇', '捺'],
                '火': ['点', '撇', '撇', '捺'],
                '一': ['横'],
                '丨': ['竖']
            };
            return orderMap[char] || ['横'];
        }

        function generateMockWritingTips(char) {
            return `书写"${char}"字时要注意：\n1. 保持字形端正，重心稳定\n2. 笔画间距要均匀\n3. 起笔要轻，行笔要稳\n4. 收笔要干净利落\n5. 整体结构要协调美观`;
        }

        function generateMockMemoryTip(char) {
            const tips = {
                '土': '土字三笔画，一横一竖一横下',
                '也': '也字像蛇形，弯弯曲曲往前行',
                '皮': '皮字有五画，撇点相连不要怕',
                '支': '支字四笔成，横撇捺点要分明',
                '水': '水字四点水，流淌不息润万物',
                '火': '火字红彤彤，点撇撇捺要记清'
            };
            return tips[char] || `${char}字好写记，多练几遍就会了`;
        }

        function generateMockCommonErrors(char) {
            return `学生在书写"${char}"字时常见错误：\n1. 笔画顺序不正确\n2. 字形比例不协调\n3. 笔画连接不自然\n4. 整体结构不稳定\n\n纠正方法：\n- 反复练习正确笔顺\n- 注意观察字形特点\n- 加强基础笔画训练`;
        }

        // 更新笔画显示
        function updateStrokeDisplay(strokes) {
            const container = document.getElementById('stroke-display');
            container.innerHTML = strokes.map((stroke, index) => 
                `<span class="stroke-item">${index + 1}. ${stroke}</span>`
            ).join('');
        }

        // 更新预览
        function updatePreview() {
            document.getElementById('preview-tips').textContent = 
                document.getElementById('writing-tips-textarea').value || '暂无内容';
            document.getElementById('preview-memory').textContent = 
                document.getElementById('memory-tip-textarea').value || '暂无内容';
            document.getElementById('preview-errors').textContent = 
                document.getElementById('common-errors-textarea').value || '暂无内容';
        }

        // 实时更新预览
        document.addEventListener('input', function(e) {
            if (e.target.matches('#writing-tips-textarea, #memory-tip-textarea, #common-errors-textarea')) {
                updatePreview();
            }
        });

        // Canvas相关功能
        function setupCanvas() {
            const canvas = document.getElementById('writing-canvas');
            const ctx = canvas.getContext('2d');
            
            // 绘制练习格
            ctx.strokeStyle = '#ddd';
            ctx.lineWidth = 1;
            
            // 绘制九宫格
            for (let i = 1; i < 3; i++) {
                ctx.beginPath();
                ctx.moveTo(i * 100, 0);
                ctx.lineTo(i * 100, 300);
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(0, i * 100);
                ctx.lineTo(300, i * 100);
                ctx.stroke();
            }
            
            // 绘制中心线
            ctx.strokeStyle = '#eee';
            ctx.setLineDash([5, 5]);
            
            ctx.beginPath();
            ctx.moveTo(150, 0);
            ctx.lineTo(150, 300);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(0, 150);
            ctx.lineTo(300, 150);
            ctx.stroke();
            
            ctx.setLineDash([]);
        }

        // Canvas控制功能
        function showStroke() {
            alert('显示笔画轮廓');
        }

        function hideStroke() {
            alert('隐藏笔画轮廓');
        }

        function animateWriting() {
            alert('演示书写动画');
        }

        function clearCanvas() {
            setupCanvas();
        }

        // 文件导入
        function importSVGFile() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = '.svg,.xml';
            input.onchange = function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('svg-data-textarea').value = e.target.result;
                    };
                    reader.readAsText(file);
                }
            };
            input.click();
        }

        function previewSVG() {
            const svgData = document.getElementById('svg-data-textarea').value;
            if (svgData.trim()) {
                alert('预览SVG描边数据（实际会在Canvas中显示）');
            } else {
                alert('请先输入或导入SVG数据');
            }
        }

        // 主要功能
        function saveWritingData() {
            if (!selectedItem) {
                alert('请先选择一个字符');
                return;
            }
            alert('✅ 书写数据已保存');
        }

        function generateWorksheet() {
            if (!selectedItem) {
                alert('请先选择一个字符');
                return;
            }
            alert('📋 正在生成字帖...');
        }

        function previewWriting() {
            if (!selectedItem) {
                alert('请先选择一个字符');
                return;
            }
            alert('👁️ 预览书写效果');
        }

        function exportPractice() {
            if (!selectedItem) {
                alert('请先选择一个字符');
                return;
            }
            alert('📤 导出练习材料');
        }

        function clearForm() {
            document.querySelectorAll('.form-input, .form-textarea').forEach(el => el.value = '');
            document.getElementById('stroke-display').innerHTML = '';
            updatePreview();
        }
    </script>
</body>
</html> 